<template>
  <!-- <div>进入登陆页面</div> -->
  <div class="layout">
        <Sider :style="{position: 'fixed', height: '100vh', left: 0, overflow: 'auto'}">
            <Menu active-name="1-1" theme="dark" width="auto" :open-names="['1']" @on-select="handleSelect($event)">
                <Submenu name="1" @click="handleSelect">
                    <template slot="title">
                        <Icon type="ios-navigate"></Icon>
                        图表展示
                    </template>
                    <MenuItem name="1-1">table展示</MenuItem>
                    <MenuItem name="1-2">echarts图表</MenuItem>
                </Submenu>
            </Menu>
        </Sider>
        <Layout :style="{marginLeft: '200px'}">
            <Header :style="{background: '#fff', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)'}"></Header>
            <Content :style="{padding: '0 16px 16px'}">
              <router-view></router-view>
                <Tabs type="card">
                    <TabPane label="table展示">
                      <Card>
                      </Card>
                    </TabPane>
                    <TabPane label="echarts图">
                      <Card>
                      </Card>
                    </TabPane>
                </Tabs>
            </Content>
        </Layout>
    </div>
</template>

<script>
import echarts from 'echarts';

export default {
  data () {
            return {
            }
  },
  methods:{
    handleSelect(name){
      console.log('事件点击', name)
      // this.$router.push({path:'echats',redirect: { name: 'main' }})
      if(name=='1-1'){
        this.$router.push({ name: 'Content'});
      }else{
        this.$router.push({ name: 'Echarts'});
      }
    }
  }
}
</script>

<style>
  .layout{
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
    }
    .layout-header-bar{
        background: #fff;
    }
    #chart {
      width: 500px;
      height: 500px;
    }
</style>